<template>
<!--  margin-top: 2vh;margin-left:1vh;-->
  <div style="width: 1200px;margin:2vh auto 0;background-color: #f5f5f5;padding-top:2vh;height: 15%;overflow: hidden">
    <el-row :gutter="10" style="margin-left: 2vh;">
      <el-col :span="0.1">
        <div id="little_block"></div>
      </el-col>
      <el-col :span="23.9">
        <span style="font-size:20px;font-family: 'Microsoft YaHei UI Light';display: inline-block;">标签管理</span>
      </el-col>
    </el-row>
    <el-row style="margin-top: 4vh;">
      <el-col :span="20">
        <el-form>
          <el-form-item>
            <el-input placeholder="请输入关键字" @keydown.enter
                      style="width: 350px;height: 40px;margin-left: 2vh;">
              <template #suffix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <el-button type="primary">新增标签</el-button>
      </el-col>
    </el-row>
  </div>
  <div style="height: 70%;width: 1200px;margin:0 auto;background-color: #f5f5f5;overflow: hidden">
    <el-table :data="arr.slice((size-1)*10,(size-1)*10+10)">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="label" label="用户名" align="center"/>
      <el-table-column prop="person" label="添加入" align="center"/>
      <el-table-column prop="updateTime" label="最后修改时间" align="center"/>
      <el-table-column prop="status" label="状态" align="center"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" link>编辑</el-button>
          <el-button type="danger" link>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div style="height: 5%;width: 1200px;margin:0 auto;background-color: #f5f5f5;">
    <el-pagination
        v-model:current-page="size"
        :page-size="10"
        :background="true"
        layout="total, prev, pager, next"
        :total="arr.length"
        @size-change=""
        @current-change=""
    />
  </div>
</template>

<script setup>
import {ref} from "vue";

const size = ref(1);
const arr = ref([
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
  {label:'高血压',person:'李小萌',updateTime:"2020/10/09 10:09:09",status:'1'},
]);
</script>

<style scoped>
#little_block {
  margin-left: 1vh;
  margin-top: 0.5vh;
  width:6px;
  height:20px;
  background:inherit;
  background-color:rgba(41, 132, 248, 1);
  border: 0px none;
  border-radius:8px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  display: inline-block;
}
</style>